<template>
  <div id="app">
    <MyHeader style="margin-bottom: 50px"></MyHeader>
    <hr style="border: #de0100 solid 1px"/>
    <!--    {{bookId}}-->
    <!--    {{$route.params.bookId}}-->

    <el-row :gutter="20">
      <el-col :span="8" style="margin-bottom: 50px">
        <div class="block" style="margin-left: 80px">
          <el-carousel height="350px" style="width: 420px">
            <el-carousel-item v-for="item in books.bookimg">
              <img :src="item.bookimageaddress" style="height: 100%;width: 100%">
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <el-col :span="12" style="margin-left: 100px">
        <div class="grid-content bg-purple-light" style="text-align: left">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple" style="font-size: 28px">{{ books.book.bookname }}</div>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="12" style="width: 300px;">
              <div class="grid-content bg-purple-light" style="font-size: 22px">价格:
                <span style="color: #de0100;font-size: 32px"
                  v-if="books.book.isfree==0">￥{{ books.book.bookprice }}
                </span>
                <span style="color: #de0100;font-size: 32px"
                      v-else-if="books.book.isfree==1">免费
                </span>
                <span style="color: #de0100;font-size: 32px"
                      v-else>积分兑换
                </span>
              </div>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="12" style="width: 300px;">
              <a href="/read" v-if="books.book.isfree==1" style="color: #92B8B1; font-size: 20px">免费阅读</a>
              <a href="" v-if="books.book.isfree==2">所需积分{{books.book.howintegral}}</a>
            </el-col>
          </el-row>
          <br/>
          <el-row v-if="books.book.isfree==0">
            <el-col :span="12" style="width: 300px;">
              数量：
              <button @click="subBook()">-</button>
              <input type="text" style="width: 60px" name="cartNum" id="cartNum" v-model="cartNum"></input>
              <button @click="addBook()">+</button>
            </el-col>
          </el-row>
          <br/>
          <el-row v-if="books.book.isfree==0">
            <el-col :span="12" style="width: 300px;">
              <el-button :plain="true" @click="joinCarts()">加入购物车</el-button>
              <el-button type="danger" @click="shoping">立即购买</el-button>
            </el-col>
          </el-row>
          <el-row v-if="books.book.isfree==1">
            <el-col :span="12" style="width: 300px;">
              <el-button type="danger" @click="read">立即阅读</el-button>
            </el-col>
          </el-row>
          <el-row v-else-if="books.book.isfree==2">
            <el-col :span="12" style="width: 300px;">
              <el-button type="danger" @click="read">立即兑换</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-button type="danger" @click="joinCollect">加入收藏</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Button from "@/components/Button";
import qs from "qs";

export default {
  name: "Details",
  components: {Button},
  data() {
    return {
      bookId: this.$route.params.bookId,
      imgUrl: 'https://img.alicdn.com/imgextra/i3/2200776705531/O1CN01sH9kwz1qjF9xEy1z1_!!2200776705531-0-scmitem6000.jpg',
      books: null,
      cartNum: 1,
      statusAdd: '',
      statusSub: null,
      bookid: [],
      //访问量
      visitNum:'',
      //阅读量
      readNum:'',
      //购买量
      shopNum:''
    }

  },
  methods: {
    joinCarts() {
      let formData = new FormData;
      formData.append("userId", '1111');
      formData.append("bookId", this.bookId);
      formData.append("bookNum", this.cartNum);
      var vm = this;
      axios({
        method: 'post',
        url: 'http://localhost:8082/book-manager/addCart',
        data: formData
      }).then(function (resp) {
        console.log(resp.data)
        if (resp.data === 'success') {
          vm.$confirm('加入购物车成功?', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '留在当前页面',
            cancelButtonText: '去购物车结算',
          }).then(() => {
          }).catch(() => {
            vm.$router.push('/cart')
          });
        }
      })
    },
    addBook() {
      this.cartNum++;
      if (this.cartNum > 1) {
        this.statusAdd = '';
      }
    },
    subBook() {
      if (this.cartNum > 1) {
        this.cartNum--;
      }
      if (this.cartNum <= 1) {
        this.statusAdd = 'disabled';
      }
    },
    shoping() {
      var vm = this
      this.bookid[0]=this.bookId
      var orderData = {
        userId: this.$store.getters.getUser.userid,
        orderPrice:this.books.book.bookprice*this.cartNum,
        bookid: this.bookid
      }
      console.log(orderData)
      axios({
        method: 'post',
        url: 'http://localhost:8082/book-manager/order/addOrder',
        data: qs.stringify(orderData)
      }).then(function (resp){
        if(resp.data.flag=='success'){
          var pay = {
            orderId: resp.data.data,
            orderPrice: orderData.orderPrice
          }
          //下单成功跳转付款页面
          vm.$router.push({
            name: "Payment",
            params:pay
          })
        }else{
          //下单失败
        }
      })
    },
    joinCollect(){
      var _this = this
      axios.get('http://localhost:8082/book-manager/collect/addCollect?bookid='+_this.bookId+"&userid="+this.$store.getters.getUser.userid).then(function (resp){
        if(resp.data.flag=='success'){
          _this.$message(resp.data.message)
        }else{
          _this.$message(resp.data.message)
        }
      })
    },
    read(){
      this.$router.push("/read/"+this.bookId);
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:8082/book-manager/book/findBookById?bookId=' + _this.bookId).then(function (resp) {
      console.log(resp.data)
      _this.books = resp.data;

      // alert(resp.data.content);
    })
  }
}
</script>

<style scoped>
#app {

}

.details-img, .details-contents {
  width: 300px;
  height: 400px;
  border: #92B8B1 solid 1px;
  /*display: inline-block;*/
  margin-left: 100px;
  /*line-height: 1px;*/
}

.details-img {
  float: left;
  margin-left: 150px;
}

.details-contents {
  /*margin-right: 300px;*/
  width: 500px;
  float: left;
}

#details {
  margin-top: 50px;
  margin-left: 0;
}

.bname {
  height: 50px;
}

.rowShop {
  display: inline;
  height: 80px;
  margin-left: 30px;
  margin-bottom: 50px;
}

</style>
